<template>
  <div class="publicopinionlist">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
        <div class="left">
          <step :data='1'></step>
        </div>
        <div class="right">
          <div class="num">
            <b v-text='materialnum()'></b>
            <div class="desc">当前素材数</div>
          </div>
          <div class="edit">
            <div class="generate" @click="$router.push('/brief/confirmsc')">生成简报</div>
            <div class="choose" @click="$router.push('/brief/confirmsc')">挑选素材</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab " @click="$router.push('/brief/step01')">素材库</div>
      <div class="tab " @click="$router.push('/brief/list')">舆情列表</div>
      <div class="tab active" >全文搜索</div>
    </div>
    <div class="search">
      <input type="text" v-model="searchText" placeholder="请输入人名 地名 关键词名" @keyup.enter="querymessage()">
      <span @click="querymessage()"></span>
    </div>
    <!-- <div class="types">
      <div v-for="(item,index) in webSite" :key="index" :class="{active:index==tindex}" @click="gettypes(item,index)">
        {{item.websiteName}}({{item.doc_count}})
      </div>
    </div> -->
    <div class="bodyer" v-show="flag">
      <div class="handle">
        <el-checkbox class="checkbox" @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
        <el-button class="right" @click="addAll()">批量加入</el-button>
      </div>
      <div class="news">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="checkbox">
            <el-checkbox v-model="item.checked"></el-checkbox>
          </div>
          <div class="content">
            <div class="main">
              <div class="pic">
                <div class="img" v-bind:style="{backgroundImage:item.urlimg}"></div>
                <div class="label">{{item.webSite.substring(0,8)}}</div>
              </div>
              <div class="text">
                <div class="head">
                  <div class="title" v-html="filterHtml(item.title)" @click="link(item.url)"></div>
                  <div class="qx">倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel></div>
                </div>
                <div class="body" v-html="filterHtml(item.content)"></div>
              </div>
            </div>
            <div class="imgbtns">
              <div class="imbtn add" v-show="item.addmaterial ==false" @click="addbriefn(item)">加入简报素材</div>
              <div class="imbtn addsuccess" v-show="item.addmaterial==true">已加入简报素材</div>
            </div>
          </div>
          <div class="time">
            <div>{{item.poTime|fomartDate(item.poTime)}}</div>
            <div>{{item.poTime|fomartTime(item.poTime)}}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-sizes="[30, 50, 80, 100]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
    </div>
      
  </div>
</template>
<script>
import step from './step'
import moment from 'moment'
import TendLabel from 'components/common/TendLabel'
let condition = {
  id:'',
  startTime:moment().startOf('day'),
  endTime:moment(),
  websiteId:-1,
  radiodata:[
    {
      label: '倾向性',
      item: ['全部','负面','正面','中性'],
      checked:'全部'
    },{
      label: '监测范围',
      item: ['全部', '全国','本地','境外'],
      checked:'全部'
    },{
      label: '时间排序',
      item: ['时间降序', '时间升序','相关性排序'],
      checked:'时间降序'
    },{
      label:'相似文章',
      full:true,
      item:['展开','合并'],
      checked:'展开'
    }]
}
let types = [{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135}]
export default {
  name:'textsearch',
  components: {step,TendLabel},
  data(){
    return{
      condition,
      types,
      tindex:0,
      total:0,
      pageNum:1,//第几页
      pageSize:30,//条数
      list:[],
      webSite:[],
      checkAllFlag:false,
      searchText:'',
      flag:false
    }
  },
  mounted(){
  },
  filters:{
    fomartDate:function(time){
      return moment(parseInt(time)).format('YYYY-MM-DD')
    },
    fomartTime:function(time){
      return moment(parseInt(time)).format('HH:mm:ss')
    },
  },
  methods:{
    materialnum(){
      let num = 0
      if(localStorage.Temporarymaterial){
        num = JSON.parse(localStorage.Temporarymaterial).length
      }
      return num
    },
    deleteScreen(index){
      this.condition.radiodata[index].checked = this.filters[index]
    },
    gettypes(item,index){
      this.condition.websiteId = item.websiteId
      this.tindex = index
    },
    checkAll(){
      this.list.map(d=>d.checked = this.checkAllFlag)
    },
    link(url){
      window.open(url)
    },
    addbriefn(item){
      let arr = []
      if(localStorage.Temporarymaterial){
        arr = JSON.parse(localStorage.Temporarymaterial)
      }
      if(arr.length>=20){
        this.$message.error('素材库最多为20条')
        return
      }
      if (!arr.includes(item.id)){
          arr.push(item.id)
      }
      localStorage.Temporarymaterial = JSON.stringify(arr)
      item.addmaterial = true
      this.$message.success('已加入')
      this.materialnum()
    },
    async addAll(){
      let newlist = this.list.filter(d => d.checked).map(d=>d.id) 
      let arr = []
      if(localStorage.Temporarymaterial){
        arr = JSON.parse(localStorage.Temporarymaterial)
      }
      let _ = [...new Set(arr.concat(newlist))]
      if(_.length>=20){
        _ = _.slice(0,20)
        this.$message.success('最多20条数据')
      }
      this.list.map((d)=>{
        if(_.includes(d.id)){
          d.addmaterial = true
        }
      })
      localStorage.Temporarymaterial = JSON.stringify(_)
      this.$message.success('已加入')
      this.materialnum()
    },
    async getWebSite(){
      let res = await this.$http.get('vrv-monitor-platform-web/data/queryTodayOpinion?aggsField=webSiteType&positiveOrNegative=-1')
      let data = res.body.data
      let all = data.reduce((a, d) => a + parseInt(d.doc_count), 0)
      data.unshift({
        websiteName:'全部',
        doc_count:all,
        websiteId:'-1'
      })
      this.webSite = data
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.querymessage()
    },
    handleCurrentChange(val){
      this.pageNum = val
      this.querymessage()
    },
    filterHtml(value){
      return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
    async querymessage(){
      if(!this.searchText){
        this.$message.error('请输入内容')
        return
      }
      this.$store.commit('LoadingTrue');
      let res = await this.$http.post('vrv-monitor-platform-web/data/homeSearch',{
          currentPage:this.pageNum,
          size:this.pageSize,
          sortField:'poTime',
          sortType:'desc', //desc _score
          searchType:'localsearch',
          query:this.searchText,
          scope:-1
      })
      this.$store.commit('Loadingfalse');
      this.flag = true
      this.total = res.body.totals>3000?3000:res.body.totals
      let value = res.body.data
      this.list = (value[0] && value[0]['data']) ? value.map(d => d.data[0]) : value
      this.list.filter((d,i) => i<3000)
      this.list.map((d)=>{
        this.$set(d,'checked', false) 
        let arr = []
        if(localStorage.Temporarymaterial){
          arr = JSON.parse(localStorage.Temporarymaterial)
        }
        if (arr.indexOf(d.id)!=-1){
          this.$set(d,'addmaterial', true)
        }else{
          this.$set(d,'addmaterial', false)
        }
        let imgurl = d.domain
        this.$http.get(`static/${imgurl}.png`).then(res=>{
          this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
        }).catch(err=>{
          this.$set(d,'urlimg',"url('static/defult.png')")
        })
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.toper
  height 250px
  padding 30px
  box-sizing border-box
  >.head
    height 40px
    font-size 0
    border-bottom 1px solid #dcdcdc 
    box-sizing border-box
    .title
      display inline-block
      font-size 1.3rem
      color #555
      font-weight bold
    .desc
      display inline-block
      margin-left 8px
      font-size 14px
      color #999
      i
        display inline-block
        margin-left 8px
        width 14px
        height 14px
        background-image url('img/brief-why.png')
        background-repeat no-repeat
        background-size cover
  .liuchen
    margin-top 38px
    font-size 0
    display flex
    .left
      flex 1
    .right
      width 250px
      font-size 0
      .num
        float left
        b
          display block
          font-size 40px
          color #e75a46
          text-align center
        .desc
          font-size 18px
          color #333
      .edit
        float right
        >div
          width 120px
          height 34px
          color #fff
          background-position 10% 55%
          font-size 12px
          line-height 34px
          text-indent 40px
          background-repeat no-repeat
          &.generate
            background-color #e85a47
            background-image url(img/generate.png)
            border-radius 8px
          &.choose
            background-color #e85a47
            background-image url(img/choose.png)
            border-radius 8px
            margin-top 10px
        .desc
          font-size 12px
          color #999
          text-indent 0
          >i
            display inline-block
            color #e85a47
            line-height 34px
.tabs
  background #f0f5fb
  height 40px
  padding 14px 30px 0 30px
  border-bottom 1px solid #dcdcdc
  font-size 0
  .tab
    display inline-block
    width 120px
    height 39px
    line-height 40px
    background #fff
    font-size 14px
    color #555
    text-align center
    border-top-right-radius 8px
    border-top-left-radius 8px
    cursor pointer
    margin-left 8px
    &:first-of-type
      margin-left 0
    &.active
      border 1px solid #dcdcdc
      border-bottom 1px solid #fff
      color #ec6941
      font-weight bold
.types
  display flex
  height 48px
  border 1px
  border-top 1px solid #dcdcdc
  border-bottom 1px solid  #dcdcdc
  >div
    flex 1
    background #eee
    text-align center
    line-height 48px
    border-left 1px solid #dcdcdc
    cursor pointer
    &:last-child
      border-right 1px solid #dcdcdc
    &.active
      background #e85a47
      color #fff
.search
  position relative
  width 600px
  height 44px
  border 1px solid #dcdcdc
  border-radius 50px
  margin 20px auto
  overflow hidden
  padding 0 20px
  box-sizing border-box
  color #555
  >input
    width 100%
    height 100%
    border 0
    outline none
  >span
    position absolute
    right 14px
    top 10px
    width 21px
    height 21px
    background url(img/brief-search.png) no-repeat
    background-size 100%
    cursor pointer
.bodyer
  >.title
    padding 20px 30px
    font-size 20px
    color #333
    box-sizing border-box
    cursor pointer
  >.handle
    height 50px
    line-height 50px
    background #f6f6f6
    padding-left 10px
    >.checkbox
      margin-right 40px
    >.right
      float right
      margin-right 50px
      margin-top 7px
  .news
    .item
      height 160px
      border-bottom 1px solid #dcdcdc
      display flex
      &:first-of-type
        border-top 1px solid #dcdcdc
      .checkbox
        width 70px
        padding-left 10px
        padding-top 10px
        box-sizing border-box
      .time
        width 150px
        >div
          text-align center
          color #333
          font-size 14px
          &:first-of-type
            margin-top 60px
      .content
        flex 1
        border-left 1px solid #dcdcdc
        border-right 1px solid #dcdcdc
        .main
          display flex
          height 120px
          .pic
            width 145px
            border-right 1px solid #dcdcdc
            text-align center
            >.img
              width 60px
              height 60px
              border 1px solid #dcdcdc
              border-radius 50%
              margin 5px auto
              margin-top 20px
              background-repeat no-repeat
              background-size 100%
          .text
            flex 1
            padding 15px 30px
            .head
              overflow hidden
              height 35px
              line-height 35px
              .title
                color #000
                float left
                font-size 0.88rem
              .qx
                float right
                color #666
            .body
              padding-top 0.8rem
              color #666
              font-size 0.88rem
              line-height 1.9rem
              height 60px
              overflow hidden
        .imgbtns
          height 40px
          border-top 1px solid #dcdcdc
          .imbtn
            float right
            height 30px
            line-height 30px
            margin-top 5px
            border-left 1px solid #dcdcdc
            padding  0 45px
            font-size 14px #666
            cursor pointer
            &.del
              background url(img/brief-del.png) no-repeat
              background-position 10% 50%
            &.add
              background url(img/brief-add.png) no-repeat
              background-position 10% 50%
            &.addsuccess
              color #9c97cb
              background url(img/brief-addsuccess.png) no-repeat
              background-position 10% 50%
.pagination
  text-align right
  padding 0.93rem 0.93rem
</style>

